import React from 'react';
import { connect, routerRedux } from 'dva';
import DocumentTitle from 'react-document-title';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, Input, message } from 'antd';
import styles from './resetPassword.less';
import maatLogin from '../../assets/frame/login/login_logo.png';
import maatLoginT from '../../assets/frame/login/login_logoText.png';
@Form.create()
@connect(({ userM }) => ({ userM }))
class ResetPasswordC extends React.PureComponent {
  state = {};
  UNSAFE_componentWillMount() {}

  componentDidMount() {
    // 监听enter键触发登录
    document.addEventListener('keydown', this.onkeydown);
    const {
      form: { setFieldsValue },
    } = this.props;
    //拿到用户id
    setFieldsValue({
      userId: sessionStorage.getItem('resetUser'),
    });
    sessionStorage.removeItem('resetUser');
  }

  componentWillUnmount() {
    // 监听enter键触发登录
    document.removeEventListener('keydown', this.onkeydown);
    //
    if (this.countdown) {
      clearInterval(this.countdown);
      this.countdown = null;
    }
  }
  // enter响应
  onkeydown = (e) => {
    if (e.keyCode === 13) {
      this.onload();
    }
  };
  // 登录按钮响应
  onload = () => {
    const {
      dispatch,
      form: { validateFields },
    } = this.props;
    let arr = ['userId', 'originPassword', 'newPassword'];
    validateFields(arr, (err, vals) => {
      if (err) return;
      console.log(vals);
      //调用重置密码
      this.props
        .dispatch({
          type: 'userM/resetPassword',
          payload: vals,
        })
        .then((res) => {
          if (res && res.code == '0') {
            // 跳转至登录页，提示用户“请重新登录系统。”
            message.warning('请重新登录系统!');
            dispatch(
              routerRedux.push({
                pathname: '/login',
              }),
            );
          } else {
            message.error(res?.msg || '重置密码失败!');
          }
        });
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <DocumentTitle title="">
        <div className={styles.container}>
          <div className={styles.login}>
            <div className={styles.leftLogin}>
              <div className={styles.maatLogin}>
                <span>
                  <img src={maatLogin}></img>
                </span>
                <span className={styles.maatLoginT}>
                  <img src={maatLoginT}></img>
                </span>
              </div>
              <div className={styles.maatTitle}>
                <div className={styles.maatTitleC}>投资组合管理系统</div>
                <div className={styles.maatTitleE}>PORTFOLIO MANAGEMENT SYSTEM</div>
              </div>
              {/* <div className={styles.bgLogin}>
                                <img src={bgLogin}></img>
                            </div> */}
            </div>
            <div className={styles.rightLogin}>
              <div className={styles.loginBox}>
                <div className={styles.loginTitle}>重置密码</div>
                <Form.Item>
                  {getFieldDecorator('userId', {
                    rules: [
                      {
                        required: true,
                        message: '',
                      },
                    ],
                  })(
                    <Input
                      className={styles.loginInputName}
                      // placeholder={'请输入手机号'}
                      disabled={true}
                    />,
                  )}
                </Form.Item>
                <Form.Item>
                  {getFieldDecorator('originPassword', {
                    rules: [
                      {
                        required: true,
                        message: '请输入旧密码',
                      },
                    ],
                  })(<Input type='password' className={styles.loginInputPassword} placeholder='请输入旧密码' />)}
                </Form.Item>
                <div className={styles.verificationCode}>
                  <Form.Item>
                    {getFieldDecorator('newPassword', {
                      rules: [
                        { required: true, message: '请输入新密码' },
                        {
                          pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,128}$/,
                          message: '密码长度8-128，且至少包含数字、大写字母、小写字母、特殊字符四类中的三类！',
                          // message: '输入密码格式不正确！',
                        },
                      ],
                      validateTrigger: 'onBlur',
                    })(<Input type='password' className={styles.loginInputPassword} placeholder='请输入新密码' />)}
                  </Form.Item>
                </div>
                <Button onClick={this.onload} className={styles.loginButton}>
                  保存
                </Button>
              </div>
            </div>
          </div>
        </div>
      </DocumentTitle>
    );
  }
}

export default ResetPasswordC;
